<template>
    <div ref="detailHeaderRef" class="detail-header">
        <el-card class="statistics-card" shadow="never">
            <div v-if="detailHeaderFlag" class="statistics-card-header">
                <div class="statistics-card-header-item font-style">
                    任务名称：
                    <span>{{ statisticsData.title || '--' }}</span>
                    <el-tag v-if="statisticsData.sync_wx_status_name" :type="statisticsData.sync_wx_status_type">{{
                        statisticsData.sync_wx_status_name
                    }}</el-tag>
                </div>
                <div class="statistics-card-header-item font-style">
                    下发时间：
                    <span>{{ statisticsData.sync_wx_time || '--' }}</span>
                </div>
                <div class="statistics-card-header-item font-style">
                    结束时间：
                    <span>{{ statisticsData.close_time || '--' }}</span>
                </div>
                <div class="statistics-card-header-item font-style">
                    创建人：
                    <span>{{ statisticsData.created_name || '--' }}</span>
                </div>
                <div class="statistics-card-header-item font-style">
                    创建时间：
                    <span>{{ statisticsData.created_at || '--' }}</span>
                </div>
            </div>
            <el-skeleton v-else :rows="1" animated />
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useLazyData } from '@/hooks/commonHooks';
import { getDetail } from '@/api/friendcircle';

const route = useRoute();
const routeQuery = route.query;
const detailHeaderRef = ref<null | (InstanceType<typeof HTMLDivElement> & any)>(null);

const detailHeaderFlag = ref<boolean>(false);
const statisticsData = ref<any>({});

useLazyData(detailHeaderRef, () => initData());

const initData = () => {
    getDetailFn();
};

/**
 * @description: 获取详情数据
 * @return {*}
 */
const getDetailFn = () => {
    detailHeaderFlag.value = false;
    const { id: send_moment_id } = routeQuery;
    const data = { send_moment_id };
    getDetail(data, true).then((res: any) => {
        if (res) {
            switch (
                res.sync_wx_status // 状态 0 待下发  1 已下发  2 创建失败  3 已下发  4 待下发  5 结束
            ) {
                case 0:
                    res.sync_wx_status_type = 'default';
                    break;
                case 1:
                    res.sync_wx_status_type = 'success';
                    break;
                case 2:
                    res.sync_wx_status_type = 'danger';
                    break;
                case 3:
                    res.sync_wx_status_type = 'success';
                    break;
                case 4:
                    res.sync_wx_status_type = 'default';
                    break;
                case 5:
                    res.sync_wx_status_type = 'default';
                    break;
                default:
                    res.sync_wx_status_type = 'default';
                    break;
            }
            statisticsData.value = res;
            detailHeaderFlag.value = true;
        }
    });
};
</script>

<style lang="scss" scoped>
.detail-header {
    height: 100px;
    margin-bottom: 18px;

    .font-style {
        white-space: nowrap;
        font-size: 14px;
        color: #444;
    }

    .statistics-card {
        margin-bottom: 18px;

        .statistics-card-header {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-row-gap: 18px;

            .statistics-card-header-item {
                display: flex;
                align-items: center;
                white-space: nowrap;

                .el-tag {
                    margin-left: 8px;
                }
            }
        }
    }

    .statistics-update-time {
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}
</style>
